<script setup lang="ts">


import { onMounted, shallowReactive } from "vue";
const props = defineProps<{ data: Array<{ name: string; value: number }> }>();
const max = Math.max(...props.data.map((t) => t.value));
const state = shallowReactive({ list: props.data.map(t => ({ ...t, value: 0 })) })

onMounted(() => {
  setTimeout(() => {
    state.list = props.data.slice()
  })
})
</script>
<template>
  <div :class="$style.wrap">
    <div v-for="item in state.list" :key="item.name" :class="$style.bar" :data-value="item.value" :data-name="item.name"
      :style="{ height: `${(item.value / max) * 100}%` }" />
  </div>
</template>
<style module lang="less">
.wrap {
  @apply bg-gray-50 px-6 py-8;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.bar {
  @apply bg-blue-400;
  width: 30px;
  position: relative;
  transition: height .5s;

  &::before {
    content: attr(data-value);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #333;
  }

  &::after {
    content: attr(data-name);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    font-size: 12px;
    color: #333;
    white-space: nowrap;
  }
}
</style>
